<!--
 * @Descripttion: 角色的权限
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-21 08:28:20
 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="oper-btn-card">
      <div class="clearfix">
        <div class="fl">
          <h3>角色名称: {{ roleName }}</h3>
        </div>
        <div class="fr">
          <el-button type="primary" :loading="btnLoading.save" @click="btnSaveData">保存</el-button>
          <el-button type="default" @click="btnCancle">取消</el-button>
        </div>
      </div>
    </el-card>
    <PermissionList v-if="isShowPermissionTree" ref="permissions" :permission-data-with-role="permissionDataWithRole" />
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import PermissionList from '../permissions'
import { updatePermissions } from '@/api/sys/role.js'
import { listDataByRoleId } from '@/api/sys/permission.js'

export default {
  name: 'RolePermissions',
  components: { PermissionList },
  mixins: [oftenuse],
  props: {
    rId: {
      type: String,
      required: true
    },
    roleName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isShowPermissionTree: false,
      permissionDataWithRole: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnSaveData() {
      const checkedNodes = this.$refs.permissions.getCheckedNodes()
      const permissionList = []
      this.getPermissionList(checkedNodes, permissionList)
      const params = {
        sysRole: { rId: this.rId, id: this.rId, roleName: 'sasa' },
        permissionList
      }
      console.log('params:', params)
      this.setBtnLoading('save', true)
      updatePermissions(params).then(res => {
        this.setBtnLoading('save', false)
        if (res.data.flag) {
          this.$notify.success({ title: '保存成功！' })
          this.jump2list()
        } else {
          this.$notify.error({ title: '保存失败！' })
        }
      })
    },
    btnCancle() {
      this.jump2list()
    },
    jump2list() {
      this.closeCurrentTag(this.$route)
      this.$router.push({ name: 'RoleList' })
    },
    initData() {
      const roleId = this.rId
      listDataByRoleId(roleId).then(res => {
        if (res.data.flag) {
          this.isShowPermissionTree = true
          const data = res.data.data
          this.permissionDataWithRole = data
        }
      })
    },
    //
    getPermissionList(checkedNodes, arr) {
      checkedNodes.forEach(item => {
        const obj = { perId: item.id }
        arr.push(obj)
      })
    }
  }
}
</script>

<style scoped>
</style>
